<template>
  <div class="app-container">
    <el-divider content-position="center">SSE EveventSource的使用</el-divider>
    <el-input
      v-model="SSEUrl"
      placeholder="请输入SSEUrl"
      clearable
    />
    <el-button type="success" round @click="startSSE()">开始</el-button>
    <el-button type="danger" round @click="stopSSE()">停止</el-button>
    <div v-for="(data, index) in dataStream" :key="index">
      <p>{{ data }}</p>
    </div>
    <el-divider content-position="center">WebClient 调用接口获取随机</el-divider>
    <el-button type="success" round @click="requestGxdz()">开始</el-button>
    <el-button type="success" round @click="clearGxdz()">清空</el-button>
    <table border="1px">
      <tr v-for="(item,index) in gxdz">
        <td style="width: 10px;">{{ index }}</td>
        <td style="width: 700px;">{{ item.content }}</td>
        <td style="width: 200px;">{{ item.updateTime }}</td>
      </tr>
    </table>
    <el-divider content-position="center">数据库数据备份</el-divider>
    <el-button v-loading.fullscreen.lock="fullscreenLoading" type="success" round @click="requestBackDb()">备份</el-button>
    <el-divider content-position="center">网易云随机音乐</el-divider>
    <h1>网易用音乐随机歌曲</h1>
    <div>
      <button @click="sjMusic()">换一首</button>
      <el-select v-model="musicType" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <hr>
    <div class="music-info">
      <div>音乐名称：{{ music_name }}</div>
      <div>作者：{{ music_artistname }}</div>
      <div>音乐URL：{{ music_url }}</div>
    </div>
    <div>
      <img width="200px" :src="music_pictureUrl" alt="Music Picture">
    </div>
    <!-- autoplay 音频加载完后，自动播放，默认是禁用的-->
    <audio :src="music_url" controls autoplay @ended="sjMusic1()">
      浏览器不支持
    </audio>

    <el-button round @click="dw()">定位</el-button>
  </div>
</template>

<script>
import { testFlux, gxdz, backDb, sjMusic ,ipdw} from '@/api/base/test'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'ComplexTable',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      musicType: '',
      options: [{
        value: '热歌榜',
        label: '热歌榜'
      }, {
        value: '新歌榜',
        label: '新歌榜'
      }, {
        value: '飙升榜',
        label: '飙升榜'
      }, {
        value: '抖音榜',
        label: '抖音榜'
      }, {
        value: '电音榜',
        label: '电音榜'
      }], // 热歌榜，新歌榜，飙升榜，抖音榜，电音榜

      fullscreenLoading: false,
      SSEUrl: '',
      eventSource: null,
      dataStream: [], // 用于存储实时数据

      gxdz: [],

      music_name: '',
      music_artistname: '',
      music_url: '',
      music_pictureUrl: ''
    }
  },
  created() {

  },
  methods: {

    dw(){
      ipdw().then(res => {
        console.log(res);
      })
    },

    sjMusic() {
      sjMusic(this.musicType).then(res => {
        console.log('随机音乐', res)
        if (res.data.url) {
          this.music_name = res.data.name
          this.music_artistname = res.data.artistsname
          this.music_url = res.data.url
          this.music_pictureUrl = res.data.picurl
        } else {
          this.sjMusic(this.musicType)
        }
      })
    },
    sjMusic1() {
      console.log('播放结束后调用')
      sjMusic(this.musicType).then(res => {
        console.log('随机音乐', res)
        if (res.data.url) {
          this.music_name = res.data.name
          this.music_artistname = res.data.artistsname
          this.music_url = res.data.url
          this.music_pictureUrl = res.data.picurl
        } else {
          this.sjMusic(this.musicType)
        }
      })
    },
    requestBackDb() {
      this.fullscreenLoading = true
      backDb().then(res => {
        if (res.message.includes('成功')) {
          this.fullscreenLoading = false
          this.$message.success(res.message)
        } else {
          this.fullscreenLoading = false
          this.$message.error(res.message)
        }
      })
    },
    requestGxdz() {
      gxdz().then(response => {
        if (response.message.includes('成功')) {
          this.gxdz = response.data
        }
        console.log(response)
      })
    },
    clearGxdz() {
      this.gxdz = []
    },
    fetchRealTimeData() {
      const testUrl = 'http://localhost:8938/test/testFlux'
      const testUserPreprocess = 'http://localhost:8080/test/usePreprocess'
      this.eventSource = new EventSource(this.SSEUrl) // 连接后端实时数据接口

      this.eventSource.onmessage = (event) => {
        console.log(event)
        // 将每次返回的数据添加到 dataStream 中
        this.dataStream.push(event.data)
      }

      this.eventSource.onerror = (error) => {
        console.error('Error occurred while fetching real-time data:', error)
      }
    },
    startSSE() {
      this.$message('开始')
      this.fetchRealTimeData()
    },
    stopSSE() {
      this.$message('停止')
      this.eventSource.close()
    }
  }

}
</script>
